﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

	
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
		
		<title>Using DataTable with Editable plugin - Getting the data source via ajax request</title>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "media/css/demo_validation.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
		</style>

        <script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.validate.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.editable.js" type="text/javascript"></script>

		<script type="text/javascript" charset="utf-8">
			$(document).ready( function () {
           $('#example').dataTable({
                                      "bProcessing": true,
                                      "sAjaxSource": "ajax_source2.js",
					aoColumns: [ { "bVisible": false} , null, null, null, null,

 							{	"sName": "ID",
                   						"bSearchable": false,
                   						"bSortable": false,
                   						"fnRender": function (oObj) {
                   							return "<a href='EditData.php?id=" + oObj.aData[0] + "'>Edit</a>";
								}
							}

 						]
                                    }
                                    ).makeEditable({
									sUpdateURL: "UpdateData.php",
                    							sAddURL: "AddData.php",
									sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
                    							sDeleteURL: "DeleteData.php",
									sDeleteHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
aoColumns: [ { } ,  { } , { } , { } , null ]

										});
			} );
		</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17838786-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
	</head>




<body id="dt_example">
		<div id="container">
			<a href="index.html">Home</a>
			<a href="http://code.google.com/p/jquery-datatables-editable/wiki/Overview">Wiki</a> 
			<h1 class="full_width big">

				Editable DataTable example - Injecting id of the new record into the table
			</h1>
			
			<h2>Preamble</h2>
			<p>
          </p>


	
		
			
			<h2>Live example</h2>

			<div id="demo">

 <form id="formAddNewRow" action="#" title="Add new record">
        <input type="hidden" name="id" id="id" rel="0" value="DATAROWID" />
        <label for="browser">Browser</label><br />
	<input type="text" name="browser" id="browser" rel="1" />
        <br />
        <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="platforms" rel="2"></textarea>
        <br />
        <label for="version">Engine version</label><br />
	<select name="version" id="version" rel="3">
                <option>1.5</option>
                <option>1.7</option>
                <option>1.8</option>
        </select>
        <br />
        <label for="grade">CSS grade</label><br />
		<input type="radio" name="grade" value="A" rel="4"> First<br>
		<input type="radio" name="grade" value="B" rel="4"> Second<br>
		<input type="radio" name="grade" value="C" checked rel="4"> Third
        <br />
<span class="datafield" rel="5" style="display:none"><a href="Edit.php?id=DATAROWID">Edit</a></span>
</form>

<div class="add_delete_toolbar" />

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>ID</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
			<th>Edit</th>
		</tr>
	</thead>
	<tfoot>
		<tr>

			<th>ID</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
			<th>Edit</th>
		</tr>

	</tfoot>
	<tbody>

	</tbody>
</table>

			</div>
			<div class="spacer"></div>

	

			<h2>Other examples</h2>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="inline-edit.html">Editing cells</a></li>
				<li><a href="addingrecords.html">Adding a new record</a></li>
				<li><a href="delete-record.html">Delete records</a></li>
				<li><a href="custom-editors.html">Custom editors</a></li>
				<li><a href="inline-validation.html">Validation of inline cells</a></li>
				<li><a href="events.html">Pre-processing and post-processing events</a></li>
				<li><a href="customization.html">User interface customizations</a></li>
				<li><a href="custom-messages.html">Customization of message dialogs</a></li>
				<li><a href="customize-buttons.html">Customization of buttons and form</a></li>
				<li><a href="configure-dom.html">Two different tables on the same page</a></li>
				<li><a href="ajax.html">Using Ajax source</a></li>
			</ul>
			
			<div id="footer" style="text-align:center;">
				<span style="font-size:10px;">
					DataTables Editable &copy; Jovan Popovic 2010-2011.<br>
				</span>
			</div>
		</div>
 </body>


</html>
